<template>
   <el-card class="box-card">
标签
    <el-form ref="form" :model="form" label-width="80px" :inline="true" >
      <div class="substyle">
        <el-form-item label="标签名称">
          <el-input v-model="form.subname"></el-input>
        </el-form-item>
          <el-form-item label="状态">
          <el-select v-model="form.state" placeholder="请选择">
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <div class="centerbox">
          <el-form-item>
            <el-button @click="resetForm">清除</el-button>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button type="success" icon="el-icon-edit"  @click="addSub" >新增标签</el-button>
        </el-form-item>
      </div>
    </el-form>
     <!-- <- 共多少记录  -->
      <el-alert
        type="info"
        :closable="false"
        class="infostyle"
        >
        数据一共{{tagsList.counts}}条
      </el-alert>

       <!-- 列表 -->
          <my-table
          class="mytablestyle"
          :table-props="{
            data: tagsList.items,
            border: false,
          }"
          :columns="[
            { label: '序号', prop: 'index', width: 80, align: 'center' },
            { label: '所属学科', prop: 'subjectName', width: 180, align: 'center' },
            { label: '标签名称', prop: 'tagName', width: 180, align: 'center' },
            { label: '创建者', prop: 'username', width: 180, align: 'center' },
            { label: '创建日期', prop: 'addDate' , width: 180, align: 'center',  },
            { label: '状态', prop: 'state', width: 180, align: 'center' },
            { label: '操作', slotName: 'operate', align: 'center', width:260, fixed: 'right' },  // 带插槽slotName
          ]"
          :pagination-props="{
            layout: ' prev, pager, next, sizes, jumper, total',
            total: tagsList.counts,
            background: true
          }"
          :pagination-events="events"
        >
          <!-- <template #question>
                <div v-html="basicsTestList.items[0].question" ></div> todo
          </template> -->

          <template   v-slot:operate="scope" >
            <el-row>
              <el-button type="text"
              :disabled="false"
              @click="subgroups(scope.row)"
              >

              启用
              </el-button>
              <el-button type="text" @click="subchange(scope.row)">修改</el-button>
              <el-button type="text" @click="subdelete(scope.row)">删除</el-button>
            </el-row>
          </template>
        </my-table>
        <!-- 列表 -->

          <!-- 新增目录 -->
        <el-dialog title="新增目录" :visible.sync="checkTest">
          <!-- <el-radio v-model="radiobox" label="1">通过</el-radio> -->
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="所属学科" prop="name">
              <el-select v-model="ruleForm.subject" placeholder="请选择">
                <el-option
                :label="item.label"
                :value="item.value"
                v-for="(item,i) in SubjectsSimpleList"
                :key="i"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="目录名称" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入目录名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="checkTestClose('ruleForm')">取消</el-button>
              <el-button type="primary" @click="checkTestOk('ruleForm')">确认</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>

          <!-- 修改学科 -->
        <el-dialog title="修改学科" :visible.sync="changeTest">
          <!-- <el-radio v-model="radiobox" label="1">通过</el-radio> -->
          <el-form :model="ruleFormChange" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="所属学科" prop="region">
              <el-select v-model="ruleFormChange.region" placeholder="请选择">
                <el-option
                :label="item.label"
                :value="item.value"
                v-for="(item,i) in SubjectsSimpleList"
                :key="i"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="目录名称" prop="name">
              <el-input v-model="ruleFormChange.name"></el-input>
            </el-form-item>
            <!-- <el-form-item label="是否显示" prop="delivery">
              <el-switch v-model="ruleFormChange.delivery" active-color="#13ce66"></el-switch>
            </el-form-item> -->
            <el-form-item>
              <el-button @click="changeTestClose('ruleForm')">取消</el-button>
              <el-button type="primary" @click="changeTestOk('ruleForm')">确认</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>

         <!-- 删除学科弹窗 -->
        <el-dialog title="题目预览" :visible.sync="deleteSub">
          <div class="el-icon-warning" icon="success">此操作将永久删除该目录, 是否继续?</div>
          <div slot="footer" class="dialog-footer">
            <el-button  @click="deleteSubClose">取消</el-button>
            <el-button type="primary" @click="deleteSubOk">确定</el-button>
          </div>
        </el-dialog>


   </el-card>
</template>

<script>
import { mapState, mapActions} from "vuex";
import * as submanagementApi from '@/api/submanagement';


// 获取修改值的id
let subchangeId = null
// 点击删除获取id
let subdeleteId = null

export default {
  data() {
    return {
      // 新增学科按钮弹窗里面的数据
      ruleForm: {
        // 所属学科
        subject: '',
        // 目录名称
        name: '',

      },
      // 修改学科按钮弹窗里面的数据
      ruleFormChange: {
        region: '',
        name: '',
        // delivery: true,
      },
      rules: {
        name:
        [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
        ],

      },
      page: 1,
      pagesize: 10,
      // 新增学科按钮弹窗
      checkTest:false,
      // 修改学科的弹窗
      changeTest:false,
      // 删除学科弹窗
      deleteSub:false,
      // 这是搜索框的内容
      form: {
        subname: '',
        state: '',
      },
       // 点击翻页监听事件
      events: {
        "current-change": this.handleCurrentChange,
        "size-change": this.pagesizeChange,
      },
      // 这是新增学科里的开关
      value: true,

    };
  },

  computed:{
    ...mapState("submanagement",[
      // 获取学科列表
      // "subList",
       // 获取目录列表 todo
      "directorysList",
      // 获取标签列表
      "tagsList"
    ]),
    ...mapState("testmanagement",[
       // 学科下拉菜单
      "SubjectsSimpleList"
    ])
  },
  methods: {
      ...mapActions("submanagement",[
      // 更新学科列表
      // "updatesubList",
       // 获取目录列表  todo
      "updatedirectorysList",
      // 获取标签列表
      "updatetagsList"
    ]),
      ...mapActions("testmanagement",[
         // 学科下拉菜单
      "updateSubjectsSimpleList"
    ]),
      // 更新页数
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      // 更新页数列表
      this.updatetagsList({
        page: (this.page = val),
        pagesize: this.pagesize,
      });
    },
    // 更新每页展示数量
    pagesizeChange(val) {
      console.log(`当前页: ${val}`);
      // 更新页数列表
      this.updatetagsList({
        page: this.page,
        pagesize: (this.pagesize = val),
      });
    },
    // 清除键
    resetForm(){
       // 更新界面获取学科列表
      this.updatetagsList({
        page: this.page,
        pagesize: this.pagesize,
        // subjectName: null,
      });
      // 清空搜索框
      this.form = {}

    },
    // 搜索键
    onSubmit(){
       // 初始化界面获取学科列表
      this.updatetagsList({
        page: this.page,
        pagesize: this.pagesize,
        tagName: this.form.subname,
        state: this.form.state
      })


    },
    // 新增目录按钮
    addSub(){
      this.checkTest = true

    },
    // 新增目录按钮取消键
    checkTestClose(){
      this.checkTest = false
       // 清空搜索框
      this.ruleForm.name = ''
    },

     // 新增目录按钮确认键
    checkTestOk(formName){
      // 验证规则判断   addTags
      this.$refs[formName].validate((valid) => {
        if (valid) {
          submanagementApi.addTags({
            subjectID:  this.ruleForm.subject,
            tagName: this.ruleForm.name,
          })
          this.checkTest = false
          // 清空搜索框
          this.ruleForm.name = ''
          this.ruleForm.subject = []
          // // 获取初始化目录列表
          this.updatetagsList({
            page: this.page,
            pagesize: this.pagesize,  //todo等渲染

          })
          this.$message.success('新增成功')
        } else {
          this.$message.error('新增失败')
          return false;
        }
      })
    },
    // 禁用/启用   // todo
    subgroups(row){
      submanagementApi.changeTags({
        id: row.id,
        state: 0,
      })


    },

    // 点击修改学科按钮
    subchange(row){
      // 返显   todo
      // this.ruleFormChange =({
      //   region: this.directorysList.items.subjectName,
      //   name: this.directorysList.items.directoryName,
      // })
      // 弹窗开启
      this.changeTest = true;
      subchangeId = row.id

    },

    // 取消修改学科按钮
    changeTestClose(){
       this.changeTest = false

    },
    // 确认修改学科按钮
    async changeTestOk(){
      // 修改
      await submanagementApi.amendTags({
        id: subchangeId,
        subjectID: this.ruleFormChange.region,
        tagName: this.ruleFormChange.name,
      })
      this.changeTest = false;
      // 初始化界面获取学科列表
      this.updatetagsList({
        page: this.page,
        pagesize: this.pagesize,
        // subjectName: null,
      })
    },
    // 删除学科
    subdelete(row){
      this.deleteSub = true
      subdeleteId = row.id

    },
    // 取消删除学科
    deleteSubClose(){
      this.deleteSub = false

    },
    // 确定删除
   async deleteSubOk(){
    // 删除目录
    await submanagementApi.deleteTags({
      id: subdeleteId
    })
    this.deleteSub = false;
    // 初始化界面获取学科列表
    this.updatetagsList({
      page: this.page,
      pagesize: this.pagesize,
      // subjectName: null,
    })

    }



  },
  async created(){
    // 初始化界面获取学科列表
    // this.updatesubList({
    //   page: this.page,
    //   pagesize: this.pagesize,
    //   subjectName: null,
    // })

    // 获取初始化目录列表
    this.updatedirectorysList({
      page: this.page,
      pagesize: this.pagesize,  //todo等渲染

    })
    // 初始化获取学科下拉菜单
    this.updateSubjectsSimpleList();
    // 获取标签列表
    // this.updatetagsList({
    //   page: 1,
    //   pagesize: 10
    // });
     //  这是跳转页面的接收格式
    await this.updatetagsList({
      subjectID: this.$route.params.id,
      page: this.page,
      pagesize: this.pagesize,
    });
  }
}
</script>

<style lang="scss" scoped>
 .box-card {
    margin: 8px;

    .substyle {
      display: flex;

    }
    .centerbox {
      flex: 1;
    }
  }

</style>
